<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cube photo</title>
<style type="text/css">
*{margin:0;padding:0;}
.rect-wrap {
    position: relative;
    perspective: 1600px;
}
img{width:192px;height:192px;opacity:0.6}
.container {
    width: 400px;
    height: 400px;
   transform-style: preserve-3d;
   transform-origin: 50% 50% -100px; //设置3d空间的原点
}
.slide {
    width: 192px;
    height: 192px;
	border:4px solid;
background:red;
    position: absolute;  //定位
	color:white;
	font-size:20px;
	font-weight:bold;
}
.top {
    left: 100px;
    top: -100px;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.bottom {
    left: 100px;
    bottom: -100px;
    transform: rotateX(-90deg);
    transform-origin: top;
}
.left {
    left: -100px;
    top: 100px;
    transform: rotateY(-90deg);
    transform-origin: right;
}
.right {
    left: 300px;
    top: 100px;
    transform: rotateY(90deg);
    transform-origin: left;
}
.front {
    left: 100px;
    top: 100px;
    transform: translateZ(0);  
}
.back {
    left: 100px;
    top: 100px;
	transform-origin: center;
	transform: rotateY(180deg) translateZ(200px);//得一起才有效，不能分开设置，并且是正的400px
    
}
@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: rotateX(0) rotateY(360deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.container{
    animation: rotate-frame 20s linear infinite;
}
</style>
</head>
<body>
<div class="rect-wrap">
    <div class="container">
        <div class="front slide"><img src="../images/1.jpg"></div> 
        <div class="back slide"><img src="../images/2.jpg"></div>
        <div class="left slide"><img src="../images/3.jpg"></div>
        <div class="right slide"><img src="../images/4.jpg"></div>
        <div class="top slide"><img src="../images/5.jpg"></div>
        <div class="bottom slide"><img src="../images/6.jpg"></div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
